<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<jsp:include page="/bannerServlet?method=selectAll"></jsp:include>

<%-- 	 	<jsp:include page="header.jsp"></jsp:include>
 --%>	<section class="pro-list">
		<aside class="pro-leftsidebar">
			<ul>
				<li><a>产品搜索</a>
					<ul id="pro-search">
						<li><a><input type="text" class="pro-search"><a
								class="pro-search-btn">搜索</a></a></li>
					</ul></li>
				<li><a>产品分类</a>
					<ul id="pro-category">
						<c:forEach items="${typ }" var="t">
							<li><a href="ProductServletTwo?typeId=${t.id }">${t.typeName }</a></li>
						</c:forEach>
					</ul></li>
			</ul>
		</aside>

		<aside class="pro-rightsidebar">
			<header>
				<p></p>
				<span>${typeName }</span>
				<div class="product-nav">
					<a href="/wk3un4/IndexServlet">首页 </a>&#62;<a>产品分类</a>&#62;<a href="#">${typeName }</a>&#62;<a>${typeName }系列</a>
				</div>
			</header>
			<main>
				<div class="pro-right-left">
					<div class="pro-details-img">
						<img src="${product[0].picUrl }">
					</div>
					<div class="pro-detalis-carousel">
						<div class="am-slider am-slider-default am-slider-carousel"
							data-am-flexslider="{itemWidth: 112, itemMargin: 4,move:5,  controlNav: false ,  slideshow: true}">
							<ul class="am-slides pro-details">
							<c:forEach items="${product }" var="p" begin="1">
							<li><img src="${p.picUrl }" /></li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>
				<div class="pro-right-right">
					<ul class="pro-right-info-constant">
						<li>材料:</li>
						<li>包装:</li>
						<li>花语:</li>
						<li>配送:</li>
					</ul>
					<ul class="pro-right-info-variable">
						<li>${product[0].cailiao }</li>
						<li>${product[0].baozhuang }</li>
						<li>${product[0].huayu }</li>
						<li>${product[0].peisong }</li>
					</ul>
				</div>

				<div class="am-tabs pro-tabs" data-am-tabs>
					<ul class="am-tabs-nav am-nav am-nav-tabs">
						<li class="am-active"><a href="#tab1">详细说明1</a></li>
						<li><a href="#tab2">详细说明2</a></li>
						<li><a href="#tab3">详细说明3</a></li>
						<li><a href="#tab4">详细说明4</a></li>
					</ul>

					<div class="am-tabs-bd">
						<div class="am-tab-panel am-active" id="tab1">
							<ul>
								<li><span class="pro-tabs-constant">品牌:</span> <span
									class="pro-tabs-variable">${product[0].brand }</span></li>
								<li><span class="pro-tabs-constant">是否可定制:</span> <span
									class="pro-tabs-variable">${product[0].dingZhi }</span></li>
								<li><span class="pro-tabs-constant">鲜花编号:</span> <span
									class="pro-tabs-variable">${product[0].bianhao }</span></li>
								<li><span class="pro-tabs-constant">颜色分类:</span> <span
									class="pro-tabs-variable">${product[0].color }</span></li>
								<li><span class="pro-tabs-constant">设计元素:</span> <span
									class="pro-tabs-variable">${product[0].yuansu }</span></li>
							</ul>
						</div>
						<div class="am-tab-panel" id="tab2">
							<ul>
								<li><span class="pro-tabs-constant">品牌:</span> <span
									class="pro-tabs-variable">${product[1].brand }</span></li>
								<li><span class="pro-tabs-constant">是否可定制:</span> <span
									class="pro-tabs-variable">${product[1].dingZhi }</span></li>
								<li><span class="pro-tabs-constant">鲜花编号:</span> <span
									class="pro-tabs-variable">${product[1].bianhao }</span></li>
								<li><span class="pro-tabs-constant">颜色分类:</span> <span
									class="pro-tabs-variable">${product[1].color }</span></li>
								<li><span class="pro-tabs-constant">设计元素:</span> <span
									class="pro-tabs-variable">${product[1].yuansu }</span></li>
							</ul>
						</div>
						<div class="am-tab-panel" id="tab3">
							<ul>
								<li><span class="pro-tabs-constant">品牌:</span> <span
									class="pro-tabs-variable">${product[2].brand }</span></li>
								<li><span class="pro-tabs-constant">是否可定制:</span> <span
									class="pro-tabs-variable">${product[2].dingZhi }</span></li>
								<li><span class="pro-tabs-constant">鲜花编号:</span> <span
									class="pro-tabs-variable">${product[2].bianhao }</span></li>
								<li><span class="pro-tabs-constant">颜色分类:</span> <span
									class="pro-tabs-variable">${product[2].color }</span></li>
								<li><span class="pro-tabs-constant">设计元素:</span> <span
									class="pro-tabs-variable">${product[2].yuansu }</span></li>							</ul>
						</div>
						<div class="am-tab-panel" id="tab4">
							<ul>
								<li><span class="pro-tabs-constant">品牌:</span> <span
									class="pro-tabs-variable">${product[3].brand }</span></li>
								<li><span class="pro-tabs-constant">是否可定制:</span> <span
									class="pro-tabs-variable">${product[3].dingZhi }</span></li>
								<li><span class="pro-tabs-constant">鲜花编号:</span> <span
									class="pro-tabs-variable">${product[3].bianhao }</span></li>
								<li><span class="pro-tabs-constant">颜色分类:</span> <span
									class="pro-tabs-variable">${product[3].color }</span></li>
								<li><span class="pro-tabs-constant">设计元素:</span> <span
									class="pro-tabs-variable">${product[3].yuansu }</span></li>
							</ul>
						</div>
					</div>
				</div>
			</main>
		</aside>
	</section>
	<jsp:include page="/homeInfoServlet?method=selectAll"></jsp:include>
<%-- 	 	<jsp:include page="footer.jsp"></jsp:include>
 --%></body>

</html>